  <!-- 发布评论组件 -->
  <template>
  <div class="postComment-wrap">
    <van-field
      v-model.trim ="message"
      rows="2"
      autosize
      type="textarea"
      maxlength="50"
      placeholder="请输入留言"
      show-word-limit
    />
    <van-button style="height:60px;margin-right:5px;" @click="onPost" :disabled='!message'>发布</van-button>
  </div>
</template>
<script>
import { addComments } from '@/api/following'
export default {
  name: 'postComment',
  data () {
    return {
      message: ''
    }
  },
  props: {
    /* 如果是发布文章评论，则传递文章 ID
       如果是评论回复，则传递评论 ID
    */
    target: {
      type: [Number, String, Object],
      required: true
    },
    /* 如果是发布评论回复，则许传递文章的ID */
    articleId: {
      type: [Number, String, Object],
      default: null
    }
  },
  methods: {
    async onPost () {
      // 发送评论请求
      const params = {
        target: this.target.toString(),
        content: this.message,
        art_id: this.articleId
      }
      const { data } = await addComments(params)
      // 将更新的数据传递到父组件中
      this.$emit('postDate', data.data.new_obj)
      // 清空评论框内容
      this.message = ''
      this.$toast({
        message: '评论成功'
      })
    }
  }
}
</script>
<style scoped lang="less">
.postComment-wrap{
    display:flex;
    justify-content:center;
    align-items:center;
}
</style>
